<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link href="css/common.css" rel="stylesheet" />
    <link href="css/core.css" rel="stylesheet" />
    <link href="css/animate.css" rel="stylesheet">
</head>
<body class="index">
	<div class="container">
		<div id="nav" class="clearfix">
			<div class="item fr" data-id="one">
				<a href="show-article.html">文章</a>
				<div class="tab one">
					<div class="arrow">
						<div class="i"></div>
					</div>					
					<ul>
						<li><a href="show-article.html?id=1">文章一</a></li>
						<li><a href="show-article.html?id=2">文章一</a></li>
						<li><a href="show-article.html?id=3">文章一</a></li>
						<li><a href="show-article.html?id=4">文章一</a></li>
						<li><a href="show-article.html?id=5">文章一</a></li>
						<li><a href="show-article.html?id=6">文章一</a></li>
					</ul>
				</div>
			</div>
			<div class="item fr">|</div> 
			<div class="item fr" data-id="two">
				<a href="show-works.html">作品</a>
				<div class="tab two">
					<div class="arrow">
						<div class="i"></div>
					</div>
					<ul>
						<li><a href="show-works.html?id=1">分类一</a></li>
						<li><a href="show-works.html?id=2">分类一</a></li>
						<li><a href="show-works.html?id=3">分类一</a></li>
						<li><a href="show-works.html?id=4">分类一</a></li>
						<li><a href="show-works.html?id=5">分类一</a></li>
						<li><a href="show-works.html?id=5">分类一</a></li>
					</ul>

				</div>
			</div>			
		</div>
	</div>
	<div class="container entry-title">
		<div id="site-title">
			<h1>张隆作品</h1>
			<p>John Zhang Long's Art</p>
		</div>
	</div>

	<script src="http://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
	<script src="js/jquery.fittext.js"></script>
	<script src="js/jquery.lettering.js"></script>
	<script src="js/jquery.textillate.js"></script>	
	<script type="text/javascript">
		$(function(){

			// 居中
			var center = function() {
				var marginTop = $(window).height() - $('#site-title').height();
				if(marginTop < 0)
					marginTop = 0;
				$('#site-title').css('margin-top', (marginTop-100)/2);		
			};
			center();
			$(window).resize(center);

			// 导航
			$('#nav .item').mouseover(function(){
				var cs = $(this).attr('data-id');
				$('#nav .tab').hide();
				$('#nav .' + cs).css({
					left: $(this).offset().left-30,
					top: $(this).offset().top+50
				}).show();
			}).mouseout(function(){
				$('#nav .tab').hide();
			});

			// 动画
			$('#site-title h1')
				.fitText(0.5)
				.textillate({
					loop: true,
					'in': { 
						effect: 'fadeInLeft',
						delayScale: 1.5,
						delay: 500,
						sync: false,
						shuffle: false
					},
					out: { 
						// effect: 'hinge',
						effect: 'rollOut',						
						delayScale: 1.5,
						delay: 50,
						sync: false,
						shuffle: false
					}
			});
			$('#site-title p')
				.fitText(1.2, { maxFontSize: 50 })
				.textillate({ 
					// initialDelay: 1000, 
					loop: true,
					'in': { 
						effect: 'fadeInLeftBig',
						/*delayScale: 1.5,
						delay: 500,*/
						sync: false,
						shuffle: false
					},
					out: { 
						// effect: 'hinge',
						effect: 'rollOut',						
						delayScale: 1.5,
						delay: 50,
						sync: false,
						shuffle: false
					}
			});

		});
	</script>
</body>
</html>
